<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>annulus</title>
    <style>
        /**液晶数字字体**/
        @font-face {
            font-family: 'DSDIGIT';
            src: url('fonts/DSDIGIT/ds-digit-webfont.eot');
            src: url('fonts/DSDIGIT/ds-digit-webfont.eot?#iefix') format('embedded-opentype'),
            url('fonts/DSDIGIT/ds-digit-webfont.woff2') format('woff2'),
            url('fonts/DSDIGIT/ds-digit-webfont.woff') format('woff'),
            url('fonts/DSDIGIT/ds-digit-webfont.ttf') format('truetype'),
            url('fonts/DSDIGIT/ds-digit-webfont.svg#ds-digitalbold_italic') format('svg');
            font-weight: normal;
            font-style: normal;
        }
    </style>
</head>
<body>

    <canvas id="canvas" style="width: 250px;height: 250px;"></canvas>

    <br>

    <canvas id="canvas2" style="width: 250px;height: 250px;"></canvas>

    <script src="annulus.js"></script>
    <script>
       annulus.init({
           id: 'canvas',
           eleWidth: 250,
           width: 150,
           value: 66,
           fontSize: 80,
           roundInWidth: 10,
           roundOutWidth: 10
       });

       annulus.turn({
           id: 'canvas2',
           eleWidth: 250,
           width: 150,
           value: 66,
           fontSize: 35,
           roundWidth: 8,
           fontType: 'DSDIGIT',
           fontColor: '#00ACEC',
           fontValue: '234.54',
           roundInColor: '#7FD4F6',
           roundOutColor: '#00ACEC',
           speed: 15
       });
    </script>

</body>
</html>